<!DOCTYPE html>
<html lang="zh-cmn" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Xenon Boostrap Admin Panel" />
    <meta name="author" content="" />
    <base th:href="@{/}"/>
    <title></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts/linecons/css/linecons.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts/fontawesome/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-core.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-forms.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-components.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-skins.css}"/>
    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{/css/sweetalert2.min.css}"/>
    <script type="application/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
</head>
<body class="page-body">
<script type="text/javascript" th:inline="javascript">
    var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
</script>
<div class="main-content" style="width: 97.5%;padding-left: 3%;margin-top: 3%;">
    <form role="form" class="form-horizontal">
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-color panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">商品基本信息</h3>
                    <div class="panel-options">
                        <a href="#" data-toggle="panel">
                            <span class="collapse-icon">–</span>
                            <span class="expand-icon">+</span>
                        </a>
                        <a href="#" data-toggle="reload">
                            <i class="fa-rotate-right"></i>
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品编号：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入商品编号" name="goodsCode" th:value="${goodsBasicInfo.goodsCode}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品名称：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入商品名称" name="goodsName" th:value="${goodsBasicInfo.goodsName}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">质保(月)：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" placeholder="请输入商品质保时间" name="goodsWarranty" th:value="${goodsBasicInfo.goodsWarranty}"/>
                        </div>
                        <label class="col-sm-2 control-label">退货时间(天)：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" placeholder="请输入商品退货时间" name="goodsReturn" th:value="${goodsBasicInfo.goodsReturn}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">商品系列：</label>
                        <script type="text/javascript">
                            jQuery(document).ready(function($)
                            {
                                $("#s2example-2").select2({
                                    placeholder: '请选择',
                                    allowClear: true
                                }).on('select2-open', function()
                                {
                                    $(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
                                });
                            });
                        </script>
                        <div class="col-sm-4">
                        <select class="form-control" id="s2example-2">
                            <option></option>
                            <optgroup th:each="pro1:${proSeries}" th:label="${pro1.proName}">
                                <option th:each="pro2:${pro1.proSeriesList}" th:text="${pro2.proName}" th:value="${pro2.proSeriesId}" th:selected="${goodsBasicInfo.proSeriesId == pro2.proSeriesId}"></option>
                            </optgroup>
                        </select>
                        </div>
                        <label class="col-sm-2 control-label">商品状态：</label>
                        <script type="text/javascript">
                            jQuery(document).ready(function($)
                            {
                                $("#sboxit-5").selectBoxIt({
                                    showEffect: 'fadeIn',
                                    hideEffect: 'fadeOut'
                                });
                            });
                        </script>
                        <!--th:value="${}"-->
                        <div class="col-sm-4">
                            <select class="form-control" id="sboxit-5" style="display: none;">
                                <option value="-1">请选择</option>
                                <option value="0" th:selected="${goodsBasicInfo.goodsState == 0}">下架</option>
                                <option value="1" th:selected="${goodsBasicInfo.goodsState == 1}">上架</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">商品属性：</label>
                        <script type="text/javascript">
                            jQuery(document).ready(function($)
                            {
                                $("#s2example-1").select2({
                                    placeholder: '请选择',
                                    allowClear: true
                                }).on('select2-open', function()
                                {
                                    $(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
                                });

                            });
                        </script>
                        <div class="col-sm-10">
                        <select class="form-control" id="s2example-1">
                            <option></option>
                            <optgroup th:each="pro1:${proAttrName}" th:label="${pro1.proAttrName}">
                                <option th:each="pro2:${pro1.proAttrValueList}" th:value="${pro2.proAttrNameId}" th:text="${pro2.proAttrValueName}" th:selected="${goodsBasicInfo.goodsPropertyManager.proAttrValueId == pro2.proAttrNameId}"></option>
                            </optgroup>
                        </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">短标题：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入商品短标题" name="goodsShortTitle" th:value="${goodsBasicInfo.goodsShortTitle}">
                        </div>
                    </div>
                    <div class="form-group">
                    <label class="col-sm-2 control-label">长标题：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="请输入商品长标题" name="goodsShortTitle" th:value="${goodsBasicInfo.goodsLongTitle}">
                    </div>
                    </div>
                    <a href="#" class="btn btn-info btn-icon btn-sm" style="float: right;" >
                        <i class="fa-wrench"></i>
                        <span>修改</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-color panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">产品规格及介绍</h3>
                    <div class="panel-options">
                        <a href="#" data-toggle="panel">
                            <span class="collapse-icon">–</span>
                            <span class="expand-icon">+</span>
                        </a>
                        <a href="#" data-toggle="reload">
                            <i class="fa-rotate-right"></i>
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label text-left">规格：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入产品规格" name="goodsProductStandard" th:value="${goodsBasicInfo.goodsProductStandard}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">介绍：</label>
                        <div class="col-sm-9">
                            <textarea
                                    class="form-control autogrow" cols="5" placeholder=""
                                    style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 51px;" name="goodsProductReferral" th:text="${goodsBasicInfo.goodsProductReferral}">
                            </textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">卖点：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入商品卖点" name="goodsSellingPoints" th:value="${goodsBasicInfo.goodsSellingPoints}">
                        </div>
                    </div>
                    <a href="#" class="btn btn-info btn-icon btn-sm" style="float: right;">
                        <i class="fa-wrench"></i>
                        <span>修改</span>
                    </a>
                </div>
            </div>

        </div>

        <div class="col-md-8">
            <!--<div class="panel panel-color panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">商品所属图片</h3>

                    <div class="panel-options">
                        <a href="#" data-toggle="panel">
                            <span class="collapse-icon">–</span>
                            <span class="expand-icon">+</span>
                        </a>
                        <a href="#" data-toggle="reload">
                            <i class="fa-rotate-right"></i>
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="col-md-3 col-sm-4 col-xs-6" th:each="gdp:${goodsPictureManager}">
                        <a href="javascript:void(0);" class="thumb" data-action="edit">
                             <img th:src="@{${gdp.goodsPirture}}" class="img-responsive" width="100%" height="100%"/>
                        </a>
                    </div>
                    <a href="#" class="btn btn-info btn-icon btn-sm" style="float: right;margin-top: 13%;">
                        <i class="fa-wrench"></i>
                        <span>修改</span>
                    </a>
                </div>

            </div>-->
            <script type="text/javascript">
                jQuery(document).ready(function($)
                {
                    $("#select-all").on('change', function(ev)
                    {
                        var is_checked = $(this).is(':checked');
                        $(".album-image input[type='checkbox']").prop('checked', is_checked).trigger('change');
                    });
                    $('.gallery-env a[data-action="edit"]').on('click', function(ev)
                    {
                        ev.preventDefault();
                        $("#gallery-image-modal").modal('show');
                    });
                    $('.gallery-env a[data-action="trash"]').on('click', function(ev)
                    {
                        ev.preventDefault();
                        $("#gallery-image-delete-modal").modal('show');
                    });
                    $('.gallery-env a[data-action="sort"]').on('click', function(ev)
                    {
                        ev.preventDefault();
                        var is_sortable = $(".album-images").sortable('instance');
                        if( ! is_sortable)
                        {
                            $(".gallery-env .album-images").sortable({
                                items: '> div'
                            });

                            $(".album-sorting-info").stop().slideDown(300);
                        }
                        else
                        {
                            $(".album-images").sortable('destroy');
                            $(".album-sorting-info").stop().slideUp(300);
                        }
                    });
                });
            </script>
            <section class="gallery-env">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="album-header">
                            <h2>商品所属图片</h2>
                            <ul class="album-options list-unstyled list-inline">
                                <li>
                                    <input type="checkbox" class="cbr" id="select-all" />
                                    <label for="select-all">全选</label>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" onclick="addimg()">
                                        <i class="fa-upload"></i>
                                        上传图片
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-action="trash">
                                        <i class="fa-trash"></i>
                                        删除
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="album-images row">
                            <div class="col-md-3 col-sm-4 col-xs-6" th:each="gdp:${goodsPictureManager}">
                                <div class="album-image">
                                    <a href="#" class="thumb" data-action="edit" style="height: 140px;">
                                        <img th:src="@{${gdp.goodsPirture}}" class="img-responsive" style="height: 100%;">
                                    </a>
                                    <a href="#" class="name">
                                        <span th:text="${#strings.substring(gdp.goodsPirture,8)}"></span>
                                        <em>24 August 2013</em>
                                    </a>
                                    <div class="image-options">
                                        <a href="#" data-action="trash"><i class="fa-trash"></i></a>
                                    </div>
                                    <div class="image-checkbox">
                                        <input type="checkbox" class="cbr" />
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="col-md-4">
            <div class="panel panel-color panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title">商品价格说明</h3>
                    <div class="panel-options">
                        <a href="#" data-toggle="panel">
                            <span class="collapse-icon">–</span>
                            <span class="expand-icon">+</span>
                        </a>
                        <a href="#" data-toggle="reload">
                            <i class="fa-rotate-right"></i>
                        </a>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">活动：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入活动" name="goodsTheirActivities" th:value="${goodsBasicInfo.goodsPriceManager.goodsTheirActivities}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">价格：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入商品价格" name="goodsPrice" th:value="${goodsBasicInfo.goodsPriceManager.goodsPrice}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">类型：</label>
                        <script type="text/javascript">
                            jQuery(document).ready(function($)
                            {
                                $("#sboxit-6").selectBoxIt({
                                    showEffect: 'fadeIn',
                                    hideEffect: 'fadeOut'
                                });
                            });
                        </script>
                        <div class="col-sm-9">
                            <select class="form-control" id="sboxit-6" style="display: none;">
                                <option value="0">请选择</option>
                                <option th:each="goods:${GoodsSearch}" th:value="${goods.goodsPriceTypeId}" th:text="${goods.goodsPriceTypeName}" th:selected="${goodsBasicInfo.goodsPriceManager.goodsPriceTypeId == goods.goodsPriceTypeId}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">说明：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="请输入商品卖点" name="goodsPriceDescription" th:value="${goodsBasicInfo.goodsPriceDescription}">
                        </div>
                    </div>
                    <a href="#" class="btn btn-info btn-icon btn-sm" style="float: right;">
                        <i class="fa-wrench"></i>
                        <span>修改</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    </form>
    <footer class="main-footer sticky footer-type-1" style="">
        <div class="footer-inner">
            <div class="go-up">
                <a href="#" rel="go-top">
                    <i class="fa-angle-up"></i>
                </a>
            </div>
        </div>
    </footer>
</div>
<div id="img">
    <form action="/HomeFurnish/goodsBasicInfo/img" class="dropzone dz-clickable"><div class="dz-default dz-message"><span>Drop files here to upload</span></div></form>
</div>
<link rel="stylesheet" th:href="@{/js/dropzone/css/dropzone.css}"/>
<link rel="stylesheet" th:href="@{/js/daterangepicker/daterangepicker-bs3.css}"/>
<link rel="stylesheet" th:href="@{/js/select2/select2.css}"/>
<link rel="stylesheet" th:href="@{/js/select2/select2-bootstrap.css}"/>
<link rel="stylesheet" th:href="@{/js/multiselect/css/multi-select.css}"/>
<script type="application/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="application/javascript" th:src="@{/js/TweenMax.min.js}"></script>
<script type="application/javascript" th:src="@{/js/resizeable.js}"></script>
<script type="application/javascript" th:src="@{/js/joinable.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-api.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-toggles.js}"></script>
<script type="application/javascript" th:src="@{/js/moment.min.js}"></script>
<script type="application/javascript" th:src="@{/js/daterangepicker/daterangepicker.js}"></script>
<script type="application/javascript" th:src="@{/js/datepicker/bootstrap-datepicker.js}"></script>
<script type="application/javascript" th:src="@{/js/timepicker/bootstrap-timepicker.min.js}"></script>
<script type="application/javascript" th:src="@{/js/colorpicker/bootstrap-colorpicker.min.js}"></script>
<script type="application/javascript" th:src="@{/js/select2/select2.min.js}"></script>
<script type="application/javascript" th:src="@{/js/jquery-ui/jquery-ui.min.js}"></script>
<script type="application/javascript" th:src="@{/js/selectboxit/jquery.selectBoxIt.min.js}"></script>
<script type="application/javascript" th:src="@{/js/tagsinput/bootstrap-tagsinput.min.js}"></script>
<script type="application/javascript" th:src="@{/js/typeahead.bundle.js}"></script>
<script type="application/javascript" th:src="@{/js/handlebars.min.js}"></script>
<script type="application/javascript" th:src="@{/js/multiselect/js/jquery.multi-select.js}"></script>
<script type="application/javascript" th:src="@{/js/dropzone/dropzone.min.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-custom.js}"></script>
<script type="application/javascript" th:src="@{/js/sweetalert2.min.js}"></script>
<script type="application/javascript" th:src="@{/js/commModal.js}"></script>
<script type="application/javascript">
    function initialAddimg() {
        $("#img").dialog({});
    }
    function addimg() {
        $("#img").find("form").empty();
        $("#img").dialog({
            title:'上传商品图片',
            btnValue:'上传',
            type:'create',
            btnBind:function () {
                alert("A");
                /*$.post(basePath+"/goodsBasicInfo/addimg",params,function (msg) {
                    $("#img").dialog("close");
                },'text');*/
            },
            btnBinds:function () {
                alert("b");
            }
        });
        $("#img").dialog("open");
    }
    $(function () {
        initialAddimg();


    });
</script>
</body>

</html>